import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getwidget/getwidget.dart';
import 'package:meal/constant/antd_icons.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/route/route.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

///
/// 密码登录
///
class LoginPwd extends StatefulWidget {
  const LoginPwd({Key? key}) : super(key: key);

  @override
  State<LoginPwd> createState() => _LoginPwdState();
}

class _LoginPwdState extends State<LoginPwd> {
  bool eye = true;

  bool isChecked = true;

  @override
  Widget build(BuildContext context) {
    var appBar = ToolsUtils.getDefaultBrnAppBar('登录');
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: appBar,
      body: createContainer(context),
      bottomNavigationBar: SafeArea(
          top: false,
          child: Container(
            padding: const EdgeInsets.only(bottom: Sizes.default50),
            alignment: Alignment.bottomCenter,
            child: Wrap(
              spacing: Sizes.default10,
              children: [
                InkWell(
                  onTap: () {},
                  child:
                      Text('我要开店', style: StylesUtils.customTextStyle(color: ColorsUtils.color797)),
                ),
                Text('|', style: StylesUtils.customTextStyle(color: ColorsUtils.color797)),
                InkWell(
                  onTap: () {
                    Get.toNamed(RouteGet.userPasswordForget);
                  },
                  child:
                      Text('忘记密码', style: StylesUtils.customTextStyle(color: ColorsUtils.color797)),
                )
              ],
            ),
          )),
      resizeToAvoidBottomInset: false,
      extendBody: true,
      extendBodyBehindAppBar: true,
    );
  }

  Widget createContainer(BuildContext context) {
    return LayoutBuilder(builder: (BuildContext ctx, BoxConstraints constraints) {
      return Container(
        constraints: constraints,
        decoration: const BoxDecoration(color: Colors.white),
        margin: const EdgeInsets.only(bottom: Sizes.default30),
        padding: const EdgeInsets.symmetric(horizontal: Sizes.default20),
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              alignment: Alignment.centerLeft,
              child: Text('登录密码',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color363, fontSize: Sizes.default30)),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              alignment: Alignment.centerLeft,
              child: Row(
                children: [
                  Container(
                    width: 60,
                    alignment: Alignment.centerLeft,
                    child: Text('手机号',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color363)),
                  ),
                  Expanded(
                      child: Row(
                    children: [
                      Text.rich(TextSpan(
                          text: '+86',
                          style: StylesUtils.customTextStyle(
                              fontSize: Sizes.default16, color: ColorsUtils.color363))),
                      Expanded(
                          child: Container(
                        margin: const EdgeInsets.only(left: Sizes.default10),
                        child: TextField(
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color363, fontSize: Sizes.default16),
                          decoration: InputDecoration(
                              border: const OutlineInputBorder(
                                borderSide: BorderSide.none,
                              ),
                              isCollapsed: true,
                              filled: true,
                              fillColor: ColorsUtils.rgba(255, 255, 255),
                              contentPadding: const EdgeInsets.symmetric(
                                  horizontal: Sizes.default10, vertical: Sizes.default10),
                              constraints: const BoxConstraints(minHeight: 40),
                              hintText: '请输入手机号',
                              hintStyle: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.colorCcc)),
                          keyboardType: TextInputType.phone,
                          onChanged: (String content) {},
                        ),
                      ))
                    ],
                  ))
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              alignment: Alignment.centerLeft,
              child: Row(
                children: [
                  Container(
                    width: 60,
                    alignment: Alignment.centerLeft,
                    child: Text('密码',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color363)),
                  ),
                  Expanded(
                      child: Container(
                    margin: const EdgeInsets.only(left: Sizes.default10),
                    child: TextField(
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color363, fontSize: Sizes.default16),
                      decoration: InputDecoration(
                          border: const OutlineInputBorder(
                            borderSide: BorderSide.none,
                          ),
                          isCollapsed: true,
                          filled: true,
                          fillColor: ColorsUtils.rgba(255, 255, 255),
                          contentPadding: const EdgeInsets.symmetric(
                              horizontal: Sizes.default10, vertical: Sizes.default10),
                          constraints: const BoxConstraints(minHeight: 40),
                          hintText: '请输入密码',
                          hintStyle: StylesUtils.customTextStyle(
                              fontSize: Sizes.default15, color: ColorsUtils.colorCcc)),
                      keyboardType: TextInputType.visiblePassword,
                      obscureText: eye,
                      obscuringCharacter: '*',
                      onChanged: (String content) {},
                    ),
                  )),
                  Container(
                    constraints: BoxConstraints.tight(const Size.square(Sizes.default40)),
                    alignment: Alignment.center,
                    child: IconButton(
                        onPressed: () {
                          eye = !eye;
                          setState(() {});
                        },
                        icon: Icon(eye ? AntdIcons.eye : AntdIcons.eyeClose,
                            size: Sizes.default20,
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.color999))),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              alignment: Alignment.centerLeft,
              child: Wrap(
                spacing: Sizes.default5,
                crossAxisAlignment: WrapCrossAlignment.center,
                children: [
                  BrnCheckbox(
                    radioIndex: 1,
                    onValueChangedAtIndex: (int index, bool value) {
                      isChecked = value;
                      setState(() {});
                    },
                    isSelected: isChecked,
                    childOnRight: true,
                    mainAxisSize: MainAxisSize.min,
                    child: Text(
                      '我已阅读并同意签署',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default13, color: ColorsUtils.colorE7e),
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      Get.toNamed(RouteGet.userAboutProtocol);
                    },
                    child: Text('《用户协议》',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.colorFf6, fontSize: Sizes.default13)),
                  ),
                  InkWell(
                    onTap: () {
                      Get.toNamed(RouteGet.userAboutPrivacy);
                    },
                    child: Text('《隐私政策》',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.colorFf6, fontSize: Sizes.default13)),
                  )
                ],
              ),
            ),
            Container(
              width: double.maxFinite,
              margin: const EdgeInsets.only(top: Sizes.default20),
              child: GFButton(
                  onPressed: () {},
                  text: '登录',
                  textStyle: StylesUtils.customTextStyle(fontSize: Sizes.default16),
                  shape: GFButtonShape.pills,
                  type: GFButtonType.solid,
                  size: GFSize.LARGE,
                  color: ColorsUtils.parseColorFromHexString(
                      isChecked ? ColorsUtils.colorFf6 : ColorsUtils.color666)),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              child: InkWell(
                onTap: () {
                  Get.back();
                },
                child: Text(
                  '验证码登录',
                  style: StylesUtils.customTextStyle(
                      fontSize: Sizes.default16, color: ColorsUtils.colorFf6),
                ),
              ),
            )
          ],
        ),
      );
    });
  }
}
